/**
 * FigmaMCPWorkflow 组件模板
 * 适配 Preview-first 契约与 Component Style 标准字段
 *
 * 标准参考: templates/reference-component-preview.tsx (JourneyPlanListProd)
 * 样式规范: templates/component-style-standard-pattern.md
 * 完整指南: summaries/433_Preview_SUMMARY.md
 */

import React from 'react';
import cl from 'classnames';
import { HexToRGB } from '@/utils/utils';
import { getDataSourceValue } from '@/utils/dataMart';
import style from './index.less';
import styles from '../../index.less';

interface BgImage {
  src: string;
  width: number;
  height: number;
}

interface ${ComponentName}Props {
  // 可见性与基础信息
  visible?: boolean;
  showTitle?: boolean;
  title?: string;
  description?: string;

  // 数据
  data?: any[];
  dataSourceId?: string;

  // Component Style（必须符合 component-style-standard-pattern）
  topMargin?: string;
  bottomMargin?: string;
  horizontalOutterMargin?: string;
  horizontalInnerPadding?: string;
  topPadding?: string;
  bottomPadding?: string;
  hasBg?: 'Y' | 'N';
  bgType?: 'Color' | 'Image';
  bgColor?: string;
  bgColorOpacity?: number;
  bgImg?: BgImage;
  cardCorner?: string;
}

const ${ComponentName}: React.FC<${ComponentName}Props> = (props) => {
  const {
    visible = true,
    showTitle = true,
    title = '',
    description = '',
    data = [],
    dataSourceId = '',
    topMargin = '0',
    bottomMargin = '0',
    horizontalOutterMargin = '0',
    horizontalInnerPadding = '16',
    topPadding = '16',
    bottomPadding = '16',
    hasBg = 'N',
    bgType = 'Color',
    bgColor = '#FFFFFF',
    bgColorOpacity = 100,
    bgImg = { src: '', width: 0, height: 0 },
    cardCorner = '8',
  } = props;

  const dataSource = dataSourceId ? getDataSourceValue(dataSourceId) || data : data;

  const numericOutter = Number(horizontalOutterMargin || 0);
  const numericInner = Number(horizontalInnerPadding || 0);

  const bgStyle = {
    marginTop: `${Number(topMargin || 0)}px`,
    marginBottom: `${Number(bottomMargin || 0)}px`,
    marginLeft: `${numericOutter}px`,
    marginRight: `${numericOutter}px`,
    paddingTop: `${Number(topPadding || 0)}px`,
    paddingBottom: `${Number(bottomPadding || 0)}px`,
    paddingLeft: `${numericInner}px`,
    paddingRight: `${numericInner}px`,
    backgroundColor:
      hasBg === 'Y' && bgType === 'Color' ? HexToRGB(bgColor, bgColorOpacity) : 'transparent',
    backgroundImage:
      hasBg === 'Y' && bgType === 'Image' && bgImg?.src ? `url(${bgImg.src})` : 'initial',
    backgroundPosition: 'top center',
    backgroundRepeat: 'no-repeat',
    backgroundSize: 'cover',
    borderRadius: cardCorner ? `${cardCorner}px` : undefined,
  };

  return (
    <div
      className={cl(styles.carouselBox, {
        hidden: !visible,
      })}
    >
      <div className={style.wrap} style={bgStyle}>
        {showTitle && (
          <div className={style.header}>
            <h3 className={style.title}>{title}</h3>
          </div>
        )}

        <div className={style.content}>
          {description && <p className={style.description}>{description}</p>}
          <div className={style.mainContent}>{renderMainContent(dataSource)}</div>
        </div>
      </div>
    </div>
  );
};

function renderMainContent(list: any[]) {
  return (
    <div className={style.placeholder}>
      <pre>{JSON.stringify(list, null, 2)}</pre>
    </div>
  );
}

export default ${ComponentName};
